<template>
  <div style="width: 100%; height: 100%" class="app-container">
    <el-row>
      <el-col :span="18">
        <div class="grid-content bg-purple">123</div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>集群运行时间</span>
              <div style="float: right; padding: 3px 0" type="text">23天</div>
            </div>
            <div
              id="myChart"
              :style="{ width: '300px', height: '300px' }"
            ></div>
          </el-card></div
      ></el-col>
    </el-row>
    <!-- <div class="viewLeft">
      <div class="viewLeftTop">
        <div>
          <ul class="systemtLeft">
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
              <div style="padding:10px;text-align:center">
              <span class="fontColor">
                    台运行系统
              </span>
              <div class="fontColorBottom">
                    数据量：23条
              </div>
              </div>

            </li>
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
            </li>
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
            </li>
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
            </li>
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
            </li>
            <li class="systemt1">
              <img
                class="unfoldLeftImg"
                src="../../../assets/showImages/dataVivew/unfoldLeft.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div></div>
        <div></div>
      </div>
      <div class="viewLeftBottom">234</div>
    </div>
    <div class="viewRight">345</div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.mychart3();
  },
  methods: {
   mychart3() {
　　   // var averagenum=40.22;
        var myChart3=this.$echarts.init(document.getElementById('myChart'));
        var option = {
    "title": [{
        // "text": "{a|" + wcl + "}" + "\n{b|计划完成率}",
        "show": true,
        "x": "center",
        "y": "center",
        "textStyle": {
            "rich": {
                "a": {
                    "fontSize": 18,
                    "color": "#0229FD",
                    "fontWeight": "Bold",
                    "fontFamily": "TimesNewRomanPSBoldMT",
                    "padding": [0, 0, 0, 0]
                },
                "b": {
                    "fontSize": 14,
                    "color": "#3A4B6B",
                    "fontFamily": "微软雅黑"
                }
            }
        }
    }],
    "polar": {
        "center": ["50%", "50%"],
        "radius": ["60%", "75%"]
    },
    "angleAxis": {
        "max": 1.4,
        "show": false
    },
    "radiusAxis": {
        "type": "category",
        "show": true,
        "axisLabel": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        }
    },
    "series": [{
        "name": "",
        "type": "bar",
        "roundCap": true,
        "showBackground": true,
        "backgroundStyle": {
            "color": "rgba(223, 229, 242, 1)"
        },
        "data":['20%'],
        "coordinateSystem": "polar",
        "itemStyle": {
            "normal": {
                "color": {
                    "colorStops": [{
                        "offset": 0,
                        "color": "#3D78FC"
                    }, {
                        "offset": 1,
                        "color": "#3D78FC"
                    }],
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0,
                    "type": "linear",
                    "global": false
                }
            }
        }
    }, {
        "name": "",
        "type": "gauge",
        "radius": "54%",
        "axisLine": {
            "lineStyle": {
                "color": [
                    [1, {
                        "colorStops": [{
                            "offset": 0,
                            "color": "rgba(68, 95, 163, 0)"
                        }, {
                            "offset": 0.5,
                            "color": "rgba(68, 95, 163, .2)"
                        }, {
                            "offset": 1,
                            "color": "rgba(68, 95, 163, .4)"
                        }],
                        "x": 0,
                        "y": 1,
                        "x2": 0,
                        "y2": 0,
                        "type": "linear",
                        "global": false
                    }]
                ],
                "width": 1
            }
        },
        "axisLabel": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitLine": {
            "show": false
        },
        "itemStyle": {
            "show": false
        },
        "detail": {
            "show": false
        },
        "data": [],
        "pointer": {
            "show": false
        }
    }]
}
  myChart3.setOption(option);
}
  },
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}
.viewLeft {
  float: left;
  width: 70%;
  height: 100%;
}
.viewRight {
  overflow: hidden;
  height: 90%;
  background: #00ffff;
  box-shadow: 0px 1px 6px 0px rgba(170, 182, 211, 0.35);
  border-radius: 5px;
}
.viewLeftTop {
  position: relative;
  width: 680px;
  height: 500px;
  .systemtLeft {
    position: absolute;
  }
}
.viewLeftBottom {
  height: 250px;
  box-shadow: 0px 1px 6px 0px rgba(170, 182, 211, 0.35);
  border-radius: 5px;
}
.systemt1 {
  width: 120px;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px 1px 3px 0px rgba(170, 182, 211, 0.35);
  border-radius: 3px;
  margin: 10px;
  position: relative;
}
.unfoldLeftImg {
  width: 60px;
  height: 25px;
  position: absolute;
  top: -8px;
  left: -10px;
}
.fontColor {
  font-size: 9px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1e1e1e;
  line-height: 14px;
}
.fontColorBottom {
  font-size: 8px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #2e81ff;
  line-height: 14px;
}
</style>
